import React, { Component } from 'react'
import "./fallsDetailts.scss"
import Axios from "axios"
import indexFalls01 from "../../assets/images/index-falls01.png"
import indexFalls02 from "../../assets/images/index-falls02.png"
import indexFalls03 from "../../assets/images/index-falls03.png"
import indexFalls04 from "../../assets/images/index-falls04.png"
import chetImg from "../../assets/images/chatImg05.png"
export default class fallsDetailts extends Component {
    state = {
        fallsDeList: [],
        fallsDeListItem: {},
        show1:true
    }
    componentDidMount() {
        Axios.get('./json/Falls.json'
        ).then(res => {
            // console.log(res)
            this.setState({ fallsDeList: res.data.data.list })
            // console.log(res.data.data.list)
        })
        // console.log(this.props.match.params.UserId)
        // console.log(this.state.fallsDeListItem)
    }
    goTOPlay=(index) => {
        // console.log(e.target)
       let index1 = this.state.fallsDeList[index].modelData.isVideo=false
       this.setState({
           show1:index1
       })
    }
    
    render() {
        return (
            <div className="fallsDetailts">
                {this.state.fallsDeList&&this.state.fallsDeList.map((v,index) => {
                    return <div className="fallsDetailtsList" key={v.modelData.userId} 
                    onClick={this.goTOPlay.bind(this,index)}>
                        <div className="fallsDetailtsTop">
                            <div className="fallsDetailtsTopL">
                                <div className="FDTIMG">
                                    <img src={chetImg} alt=""></img>
                                </div>
                                <p className="FDTP">
                                    <span className="FDTPSpan1">{v.modelData.userInfo.name}</span>
                                    <span className="FDTPSpan2">{v.modelData.userInfo.height}cm {v.modelData.userInfo.weight}kg | {v.modelData.userInfo.city}</span>
                                </p>
                            </div>
                            <div className="fallsDetailtsTopR">
                                关注
                                </div>
                        </div>
                        <div className="fallsDetailtsCon">
                            <div className="FDCTop">
                                <img src={v.modelData.firstFrame.path} alt="" className={v.modelData.isVideo?"FDCTopIMGBG":"FDCTopIMGBF show"}></img>
                                <img src={indexFalls04} alt="" className={v.modelData.isVideo?"FDCTopIMGBF":"FDCTopIMGBF show"}></img>
                                <video src={v.modelData.videoUrl} controls="controls" className="FDCTopIMGVD"></video>
                            </div>
                            <div className="FDCCOn">
                                <i className="FDCCOnIMGL">
                                    <img src={indexFalls01} alt=""></img>
                                </i>
                                <span className="FDCCOnR">
                                    <i className="FDCCOnR1"><img src={indexFalls02} alt=""></img></i>
                                    <i className="FDCCOnR2">22</i>
                                    <i className="FDCCOnR3"><img src={indexFalls03} alt=""></img></i>
                                    <i className="FDCCOnR2">97</i>
                                </span>
                            </div>
                            <div className="FDCBOttom">
                                <p className="FDCBOttomTit">{v.modelData.desc}</p>
                                <p className="FDCBOttomTit2">#今天穿什么</p>
                                <p className="FDCBOttomTit3"><span>2020.06.9 23:26</span>|<span>7.0万浏览</span>|<span>共11条评论{">"}</span></p>
                                <div className="FDCBOttom2">
                                    <div className="FDCBOttomImg"> <img src={chetImg} alt=""></img></div>
                                    <input type="text" disabled="disabled" placeholder="添加评价..." className="FDCBOttomInp"></input>
                                </div>
                            </div>
                        </div>
                    </div>
                })}
            </div>
        )
    }
}
